<template>
  <div class="split-pane-wrapper" ref="splitOuter">
    <div class="pane pane-left" :style="{ width: leftOffSetPercent, padding: `${this.triggerWidth}px` }">
      <slot name="left"></slot>
    </div>
    <div
    class="pane pane-trigger"
    :style="{ left: triggerLeft, width: `${ this.triggerWidth }px` }"
    @mousedown="mousedownClick">
      <i>-</i>
      <i>-</i>
      <i>-</i>
      <i>-</i>
      <i>-</i>
      <i>-</i>
      <i>-</i>
    </div>
    <div class="pane pane-right" :style="{ left: leftOffSetPercent, padding: `${this.triggerWidth}px` }">
      <slot name="right"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SplitPane',
  props: {
    value: {
      type: Number,
      default: 0.3
    }
  },
  data() {
    return {
      leftOffSet: this.value,
      triggerWidth: 8,
      max: 0.9,
      min: 0.1,
      canMove: true
    }
  },
  computed: {
    leftOffSetPercent() {
      return `${this.leftOffSet * 100}%`
    },
    triggerLeft() {
      return `calc(${this.leftOffSet * 100}% - ${this.triggerWidth / 2}px)`
    }
  },
  methods: {
    mousedownClick() {
      document.addEventListener('mousemove', this.mousemoveHandleClick)
      document.addEventListener('mouseup', this.mouseupHandleClick)
      this.canMove = true
    },
    mousemoveHandleClick(e) {
      if (!this.canMove) return
      const outerLeft = this.$refs.splitOuter.getBoundingClientRect().left
      const outerWidth = this.$refs.splitOuter.getBoundingClientRect().width
      const currentLeft = (e.pageX - outerLeft + this.triggerWidth / 2) / outerWidth
      this.leftOffSet = currentLeft
      if (currentLeft < this.min) this.leftOffSet = this.min
      if (currentLeft > this.max) this.leftOffSet = this.max
      // this.$emit('update:value', currentLeft)
    },
    mouseupHandleClick(e) {
      this.canMove = false
    }
  }
}
</script>
<style lang="scss" scoped>
  .split-pane-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: left;
    border: 1px solid #ccc;
    .pane {
      height: 100%;
      position: absolute;
      top: 0;
      &-left {
        height: 100%;
        width: 20%;
        background: #fff;
        word-break: break-all;
      }
      &-right {
        height: 100%;
        right: 0;
        bottom: 0;
        left: 20%;
        background: #fff;
      }
      &-trigger {
        height: 100%;
        background: #f8f8f9;
        border: 1px solid #dcdee2;
        border-top: none;
        border-bottom: none;
        z-index: 99;
        cursor: col-resize;
        user-select: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        i {
          display: block;
          color: #ccc;
          text-align: center;
          line-height: 4px;
        }
      }
    }
  }
</style>
